<template>
  <div>
    <el-card>
      <button type="button" class="btn btn-danger" @click="getData">刷新</button>
      <div id="main" style="width: 600px;height:400px;"></div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 存储图表中的数据，包括名称和对应的值
      pieData: [],
      // 存储图表中的数据的名称，作为图例来使用
      legendData: []
    };
  },
  methods: {
    drawChart: function() {
      var myChart1 = this.$echarts.init(document.getElementById("main"));
      myChart1.setOption({
        title: {
          text: "工况报警统计",
          x: "center"
        },
        // 用来显示图表中数据的详细信息
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series: {
          name: "工况报警",
          type: "pie",
          radius: "40%",
          data: this.pieData,
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        },
        legend: {
          data: this.legendData,
          orient: "vertical",
          left: "right"
        }
      });
    },

    // 发送Ajax请求获取数据
    getData() {
      this.$axios
        .get("/getWorkAlarms")
        .then(response => {
          this.pieData = JSON.parse(response.data)["workAlarms"];
          for (var i in this.pieData) {
            this.legendData.push(this.pieData[i].name);
          }
          this.drawChart();
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  mounted: function() {
    this.getData();
  }
};
</script>